<script lang="ts" setup>
import GoButton from '@/components/basic/GoButton.vue'
import { useMapPoint } from '@/store/modules/mapPoint'
const { getText, changeType } = useMapPoint()
const emits = defineEmits(['change'])
const change = () => {
  changeType()
  emits('change')
}
</script>

<template>
  <div class="show-point">
    <go-button icon-name="turn" @click="change">
      <template #text>
        <span>{{ getText() }}</span>
      </template>
    </go-button>
  </div>
</template>

<style scoped lang="scss">
.show-point {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 200;
  padding: 4px 10px 4px 4px;
  box-sizing: border-box;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  background: #fff;
  .map-button {
    span,
    .map-button-icon {
      line-height: 20px;
    }
  }
}
</style>
